<template>
  <!-- 实现原理 -->
  <TwoWayBindingChildren
    :model-value-a="principleA"
    @update:modelValueA="newVal => principleA=newVal"

    :model-value-b="principleB"
    @update:modelValueB="newVal => principleB=newVal"
  />

  <!-- 双向绑定使用，自定义修饰符作为组件内props属性xxxModifiers的对象属性存储，子组件内props中modelValue可简写为v-model="xxx" -->
  <TwoWayBindingChildren
    v-model:model-value-a="useA"
    v-model:model-value-b.customize="useB"
  />

  <!-- watch实现原理：与计算属性实现原理相同 -->
</template>

<script>
import {defineComponent} from 'vue';
import TwoWayBindingChildren from '@/components/two-way-binding/TwoWayBindingChildren.vue';

export default defineComponent({
  name: 'TwoWayBinding',
  components: {TwoWayBindingChildren},
  data() {
    return {
      principleA: 'principleA',
      principleB: 'principleB',

      useA: 'useA',
      useB: 'useB',
    };
  }
});
</script>

<style scoped>

</style>